<template>
  <div class="content">
    <heat-map-echarts height="580px" width="680px" />
    <div>
      <dv-border-box-7>
        <h2 class="title">特殊人口统计</h2>
        <Echart :options="options1" height="350px" width="680px" />
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
import heatMapEcharts from "./echarts/heatMapEcharts.vue";
export default {
  data() {
    return {
      options1: {
        tooltip: {
          //提示框组件
          trigger: "item", //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // formatter: "{a} <br/>{b} : {c} <br/>百分比 : {d}%", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["失能人员", "低保户", "困难户"], // 修改 x 轴的类别为要展示的信息类别
          // data: ["万州区", "黔江区", "涪陵区", "渝中区", "江北区", "渝北区"],
          // inverse: true,
          // animationDuration: 300,
          // animationDurationUpdate: 300,
          // max: 4, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            // name: "人口数",
            type: "bar",
            // data: [156, 48, 111, 58, 92, 219],
            data: ["156", "48", "111"],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      },
    };
  },
  components: {
    Echart,
    heatMapEcharts,
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  margin-top: 20px;
  margin-bottom: -30px;
}
</style>
